<template>
    <div class="addGoods">
        <el-alert title="添加商品信息" type="info" center show-icon :closable="false">
  </el-alert>
    <div class="step">
            <el-steps :space="200" :active="activeIdx" finish-status="success" align-center>
            <el-step title="基本信息"></el-step>
            <el-step title="商品参数"></el-step>
            <el-step title="商品属性"></el-step>
            <el-step title="商品图片"></el-step>
            <el-step title="商品内容"></el-step>
            <el-step title="完成"></el-step>
            </el-steps>
    </div>
        <div class="nav">
            <el-tabs :tab-position="tabPosition" style="height: 200px;" @tab-click="tab" :before-leave="tabBefore">
                <el-tab-pane label="基本信息" >
                      <div class="info">
                        <el-form :model="infoForm" :rules="rules" ref="infoForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="商品名称" prop="name">
                                <el-input v-model="infoForm.name"></el-input>
                            </el-form-item>
                            <el-form-item  label="商品价格" prop="price">
                               <el-input-number v-model="infoForm.price" 
                                   controls-position="right"
                                    :min="0" 
                                   ></el-input-number>
                            </el-form-item>
                            <el-form-item  label="商品数量" prop="num">
                               <el-input-number v-model="infoForm.num" 
                                   controls-position="right"
                                   :min="0" 
                                   :max="99"
                                   ></el-input-number>
                            </el-form-item>
                            <el-form-item  label="商品重量" prop="weight">
                               <el-input-number v-model="infoForm.weight" 
                                   controls-position="right"
                                   :min="0" 
                                   ></el-input-number>
                            </el-form-item>
                             <el-form-item  label="商品分类"  prop="class">
                               <el-cascader :options="goodsList" 
                               clearable 
                               :props="{label:'cat_name',value:'cat_id'}"
                               @change="change"
                               ></el-cascader>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="商品参数" class="params">
                    <p v-for="item in infoForm.params" >{{item.attr_name}}</p>
                </el-tab-pane>
                <el-tab-pane label="商品属性">
                  <div v-for="item,i in attr">
                         <p class="attrTitle">{{item.attr_name}}</p>
                        <el-input v-model="item.attr_vals" @input="((val)=>{changeVal(val,i)})"></el-input>
                 </div>
                </el-tab-pane>
                <el-tab-pane label="商品图片">
                    <el-upload
                        class="upload-demo"
                        action="http://api.xiaomadagege.cn:8800/api/private/v1/"
                        :headers="headers"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        :on-success="success"
                        list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-tab-pane>
                <el-tab-pane label="商品内容">
                     <div class="edit_container" ref="edit">
                        <quill-editor v-model="infoForm.goodsCon">
                        </quill-editor>
                       </div> 
                         <el-button type="primary" class="subAdd" @click="addGoods">添加商品</el-button>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            activeIdx:0, //上方步骤条的进度
            tabPosition: 'left', //导航的位置
            goodsList:[], //商品分类列表
            images:{},
            infoForm: {  //基本信息
                name: "",
                price: "",
                weight:"",
                num: "0",
                goodsClass: "", //选择的商品分类的id值
                params:"" , //参数
                attr:"", //商品属性
                saveAttr:"",
                goodsCon:"",
                goodsClassId:""
              },
              headers:{"Authorization":localStorage.getItem("token")},
             rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],
                price: [
                     { required: true, message: '请输入商品价格', trigger: 'blur' },
                ],
                 num: [
                     { required: true, message: '请输入商品数量', trigger: 'blur' },
                ],
                 weight: [
                     { required: true, message: '请输入商品重量', trigger: 'blur' },
                ],
                 class: [
                     { required: true , trigger: 'blur'},
                ],
             },
              fileList: []
        }
    },
    computed:{
        attr(){
            if(this.infoForm.saveAttr == ""){return this.infoForm.attr}
            else{
                return this.infoForm.saveAttr
            }
        }
    },
    methods:{
        //获取商品分类数据
        getGoodsClass(){
            this.$http.get("categories",{headers:{"Authorization":localStorage.getItem("token")}})
            .then(res=>{
                if(res.body.meta.status == 200){
                    this.goodsList = res.body.data
                   // console.log(this.goodsList)
                }
            })
        },
        success(a,pic,c){
             this.$set(this.images,pic.uid,pic.url)
        },
        tabBefore(index,old){
            if(!this.infoForm.goodsClass && !(index == 0)){
                this.$message.error('请选择商品分类');
                this.activeIdx=0
                return false 
           }
           else if((this.infoForm.num ==0 ||this.infoForm.weight == 0 || this.infoForm.price ==0 )&&!(index == 0)){
               this.$message.error("商品价格，数量 以及重量必须大于0")
               return false 
           }
           else if(!this.infoForm.name && !(index == 0)){
                 this.$message.error('请输入商品名称');
                   this.activeIdx=0
                return false 
           }
           else{
              this.activeIdx = parseInt(index)
               return true
           }
        },
        tab(tab){
           
            if(tab.index == 1){
                 this.$http.get("categories/"+ this.infoForm.goodsClass+"/attributes",
                    {
                        params:{sel:"many"},
                        headers:{"Authorization":localStorage.getItem("token")}
                    },
                )
                .then(res=>{
                    if(res.body.meta.status ==200){
                        this.infoForm.params = res.body.data
                    }
                })
            }
            else if(tab.index == 2){
                   this.$http.get("categories/"+ this.infoForm.goodsClass+"/attributes",
                    {
                        params:{sel:"only"},
                        headers:{"Authorization":localStorage.getItem("token")}
                    },
                )
                .then(res=>{
                    if(res.body.meta.status ==200){
                        this.infoForm.attr = res.body.data
                       // console.log(this.infoForm.attr)
                    }
                })
            }
        },
        changeVal(val,index){
            //console.log(val,index)
             if(this.infoForm.saveAttr == ""){
                   this.infoForm.saveAttr = this.infoForm.attr
             }
                this.infoForm.saveAttr.some((item,i)=>{
                  if(i == index){
                      item.attr_vals = val
                      return true
                  }
              })
        },
        addGoods(){
             if(this.activeIdx == 6){
                return
              }
                const container = this.$refs.edit
                this.infoForm.goodsCon = this.$refs.edit.innerText
                if(this.infoForm.goodsClassId.length>0){
                    this.infoForm.goodsClassId=this.infoForm.goodsClassId.join(",")
                }
                let attr = this.infoForm.saveAttr == ""? this.infoForm.attr: this.infoForm.saveAttr || ""
                 this.images = this.images.uid?this.images:null
                this.$http.post("goods",
                {
                    goods_name:this.infoForm.name,goods_cat:this.infoForm.goodsClassId,goods_price:this.infoForm.price,
                    goods_number:this.infoForm.num,goods_weight:this.infoForm.weight,attrs:attr,goods_introduce:this.infoForm.goodsCon,
                    pics:this.images
                },
                { headers:{"Authorization":localStorage.getItem("token")} })
                .then(res=>{
                    if(res.body.meta.status == 201){
                        this.activeIdx = 6
                        this.infoForm.goodsClassId=""
                         this.infoForm.goodsCon=""
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                    }
                    else{
                     this.infoForm.goodsClassId=""
                     this.$message.error(res.body.meta.msg);
                    }
                }
            )
        },
         change(val){
              this.infoForm.goodsClassId = val
               this.infoForm.goodsClass = val[2]
        },
         handleRemove(file, fileList) {
         console.log(file, fileList);
        },
         handlePreview(file) {
         console.log(file);
      }
    },
        created(){
            this.getGoodsClass()
    }
}
</script>

 
<style lang="scss" >
    .addGoods{
        .ql-editor{
            height: 300px;
        }
        .step{
            margin:20px 0 60px
        }
        .el-form-item{
            margin-bottom: 40px
        }
        .el-input-number{
            width: 100%;
            .el-input__inner {
                text-align: left 
            }
        }
        .el-tabs{
            height: 100% !important;
        }
        .params{
        
            font-size: 14px;
            p{
                padding: 20px 0;
                margin:0
            }
         }
        .attrTitle{
            font-size: 14px;
         }
         .subAdd{
             margin:20px 0 
         }
    }
   
</style>